<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自定义指令</title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<!--
		v-pre指令：添加此指令的标签不会被Vue进行代理,里面的值会保留原样,可提高解析性能
		-->
		<div id="root">
			<h2 v-big="n"></h2>
			<h2>当前的n值是:{{n}}</h2>
			<button @click="n++">点我n+1</button>
			<input type="text" v-fbind:value="n" />
		</div>
		<script>
			Vue.config.productionTip = false;
			const vm = new Vue({
				el:'#root',
				data:{
					n:1
				},
				directives:{
					big(element,binding){
						console.log('big',this)
						element.innerText = binding.value * 10;
					},
					fbind:{
						// vue将元素和自定义指令绑定时触发
						bind(element,binding){
							// 注意:此处的this是Window
							console.log('fbind-bind',this)
							element.value = binding.value
						},
						// vue将元素真正插入到html页面后触发
						inserted(element,binding){
							console.log('fbind-inserted',this)
							element.focus();
						},
						// 当依赖的变量值改变时触发
						update(element,binding){
							console.log('fbind-update',this)
							element.value = binding.value
						}
					}
				}
			});
		</script>
	</body>
</html>